<script setup lang="ts">
import { STORAGE_MODES_OPTIONS } from '@/mixins/StatisticalIndicators/MixinStatisticalIndicators'

import type {
  STORAGE_MODES,
} from '@/enum/modules/indicator'
import type { StatisticalIndicator } from '@/types/modules/statistical-indicator'

const props = defineProps<{
  mode: StatisticalIndicator['storageMode']
}>()

const data = computed(() => {
  const mode = unref(props.mode)
  /** 时间类型的反选 */
  const result: {
    collect: string[]
    entry: string[]
    calculate: string[]
    statistic: string[]
  } = {
    collect: [],
    entry: [],
    calculate: [],
    statistic: [],
  }
  for (const key in mode) {
    const data
      = mode[
        key as keyof StatisticalIndicator['storageMode']
      ]
    result[key as keyof typeof result] = data.map(v =>
      getLabel(v),
    )
  }
  return result
})
const content = computed(() => {
  return [
    `计算公式：${data.value.calculate.join('、') || '无'}`,
    `统计公式：${data.value.statistic.join('、') || '无'}`,
    `采集：${data.value.collect.join('、') || '无'}`,
    `录入：${data.value.entry.join('、') || '无'}`,
  ].join('；')
})

function getLabel(t: STORAGE_MODES): string {
  const target = STORAGE_MODES_OPTIONS.find(
    item => item.value === t,
  )
  return target?.label || ''
}
</script>

<template>
  <el-tooltip placement="top" :content="content">
    <div class="cell-container w-full flex items-center text-ellipsis">
      <div class="overflow-hidden whitespace-nowrap">
        <div class="flex items-center">
          <div class="align-center cell-item flex items-center">
            <div class="cell-title">
              计算公式：
            </div>
            <div v-if="data.calculate.length > 0" class="cell-content">
              <ElTag
                v-for="item in data.calculate"
                :key="item"
                size="small"
                type="warning"
              >
                {{ item }}
              </ElTag>
            </div>
            <div v-else class="cell-content">
              无
            </div>
          </div>
        </div>
        <div class="flex items-center">
          <div class="cell-item align-center flex items-center">
            <div class="cell-title">
              统计公式：
            </div>
            <div v-if="data.statistic.length > 0" class="cell-content">
              <ElTag
                v-for="item in data.statistic"
                :key="item"
                size="small"
                type="danger"
              >
                {{ item }}
              </ElTag>
            </div>
            <div v-else class="cell-content">
              无
            </div>
            <span class="ml-3 mr-4">...</span>
          </div>
          <template v-if="false">
            <div class="align-center cell-item flex items-center">
              <div class="cell-title">
                采集：
              </div>
              <div v-if="data.collect.length > 0" class="cell-content">
                <ElTag
                  v-for="item in data.collect"
                  :key="item"
                  size="small"
                >
                  {{ item }}
                </ElTag>
              </div>
              <div v-else class="cell-content">
                无
              </div>
            </div>
            <div class="cell-item align-center flex items-center">
              <div class="cell-title">
                录入：
              </div>
              <div v-if="data.entry.length > 0" class="cell-content">
                <ElTag
                  v-for="item in data.entry"
                  :key="item"
                  size="small"
                  type="success"
                >
                  {{ item }}
                </ElTag>
              </div>
              <div v-else class="cell-content">
                无
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </el-tooltip>
</template>

<style scoped lang="scss">
.cell-title {
  flex-shrink: 0;
  // min-width: 80px;
  text-align: right;
}
.cell-content {
  :deep(.el-tag + .el-tag) {
    margin-left: 5px;
  }
}
</style>
